<!DOCTYPE html>
<html>
<head>
	<title>system</title>
	<script src="/js/sweetalert.min.js"></script>
	<link href="/style/bootstrap.min.css" rel="stylesheet">
	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/vue.min.js"></script>
	<link rel="stylesheet" type="text/css" href="/style/admin.css">
	<link href="/style/sweetalert.min.css" rel="stylesheet">
	<style type="text/css">
		[v-cloak] {
		display: none;
		} 
	</style>
</head>
<body>
<div id="app" v-cloak>

	<nav class="navbar navbar-default" role="navigation">
		<div class="container-fluid">
		<div class="navbar-header">
			<a class="navbar-brand" href="#">药物进存销系统</a>
		</div>
		<div>
			<ul class="nav navbar-nav" style="float:right;">
				<li class="dropdown">
					<a href="#" class="dropdown-toggle" data-toggle="dropdown">
						{{accountName}}
						<b class="caret"></b>
					</a>
					<ul class="dropdown-menu" style="left:auto;right:0;min-width:100px">
						<li v-on:click="showChangePassword()" style="height:40px;"><a href="#" style="line-height: 40px">更改密码</a></li>
						<li v-on:click="logout" style="height:40px;"><a href="#" style="line-height: 40px">退出登录</a></li>
					</ul>
				</li>
			</ul>
		</div>
		</div>
	</nav>
	<div style="margin: 20px;">
		<ul class="nav nav-tabs">
			<li v-bind:class="{ active: menu=='medicine' }"><a v-on:click="changeMenu('medicine')" style="cursor: pointer">药品区</a></li>
			<li v-bind:class="{ active: menu=='table' }"><a v-on:click="changeMenu('table')" style="cursor: pointer">账单查看</a></li>
			<li v-bind:class="{ active: menu=='clerk' }"><a v-on:click="changeMenu('clerk')" style="cursor: pointer">业务员管理</a></li>
		</ul>
		<div style="min-height: 300px;border:1px solid #ddd;border-top: 0px;">
			<div v-if="panel=='medicine'">
				<div class="me-container">
					<div class="me-search">
						<div class="row" style="display: inline-block;width: 600px;">
							<div>
								<div class="input-group">
									<input type="text" class="form-control" v-model="searchMedicineName">
									<span class="input-group-btn">
										<button class="btn btn-default" type="button" v-on:click="searchMedicine">
										搜索药品
										</button>
									</span>
								</div><!-- /input-group -->
							</div><!-- /.col-lg-6 -->
						</div><!-- /.row -->
						<!-- <button type="button" v-on:click="addMedicine" class="btn btn-success" style="vertical-align:top;margin-left:20px">新增药品</button> -->
						<!-- <span style="margin-left: 10px;display:inline-block;vertical-align:top;margin-top:7px;float:right">包含已删除</span>
						<input v-model="containDeleteMedicine" type="checkbox" style="vertical-align:top;margin-top:11px;float:right"> -->
					</div>
					<div v-for="me in medicineShow" class="me-cube">
						<div class="me-img-con">	
							<img style="cursor: pointer;"  v-on:click="viewMedicine(me)" class="img-responsive" :src="me.imgurl">
						</div>
						<div>
							<span class="me-text" v-on:click="viewMedicine(me)">{{me.name}}</span><span style="color:red" v-if="me.able==0">(已删除)</span><span class="me-amout">{{me.amout}}</span>
							<!-- <button v-if="me.able==1" v-on:click="deleteMedicine(me)" style="float:right;margin-left:5px;" class="btn btn-danger btn-xs">删除</button>
							<button v-if="me.able==1" v-on:click="editMedicine(me)" type="button" style="float:right" class="btn btn-info btn-xs">更改内容</button>
							<button v-if="me.able==0" v-on:click="recoverMedicine(me)" type="button" style="float:right" class="btn btn-success btn-xs">恢复药品</button> -->
						</div>
					</div>
					<div v-if="medicine.length == 0">
						<div style="text-align:center;margin:100px 0px;">
							暂无药品
						</div>
					</div>
				</div>
				<div class="div-middle" v-if="medicine.length != 0">
					<span style="vertical-align: middle;">页数： </span>
					<ul class="pagination" style="vertical-align: middle;">
					    <li v-for="n in Math.ceil(medicine.length/20)" v-bind:class="{ active: medicinePage==n }"><a v-on:click="changePage('medicine',n)">{{n}}</a></li>
					</ul>
				</div>
			</div>
			<div v-if="panel=='table'">
				<div class="me-table-con">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>药品</th>
								<th>操作类型</th>
								<th>数目</th>
								<th>时间</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="bi in billShow">
								<td>{{bi.medicine_name}}</td>
								<td>{{bi.type=='sale'?'出售':bi.type=='damage'?'销毁':'采购'}}</td>
								<td>{{bi.amout}}</td>
								<td>{{new Date(bi.create_time).toLocaleString()}}</td>
								<td><a style="cursor: pointer;" v-on:click="viewBill(bi)">查看详情</a></td>
							</tr>
						</tbody>
					</table>
				</div>

				<div class="div-middle"  v-if="billShow.length != 0">
					<span style="vertical-align: middle;">页数： </span>
					<ul class="pagination" style="vertical-align: middle;">
					    <li v-for="n in Math.ceil(bill.length/20)" v-bind:class="{ active: billPage==n }"><a v-on:click="changePage('bill',n)">{{n}}</a></li>
					</ul>
				</div>
			</div>
			<div v-if="panel=='clerk'">
				<div class="me-table-con">
					<button type="button" class="btn btn-success" style="width: 100px;margin: 10px;" v-on:click="addClerk">添加</button>
						<span style="margin-left: 10px;display:inline-block;vertical-align:top;margin-top:18px;float:right">包含已删除</span>
						<input v-model="containDeleteClerk" type="checkbox" style="vertical-align:top;margin-top:22px;float:right">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>姓名</th>
								<th>分类</th>
								<th>账号</th>
								<th>创建时间</th>
								<th>状态</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							<tr v-for="cl in clerk">
								<td>{{cl.name}}</td>
								<td>{{cl.department == 'sales'?'销售员':cl.department=='buyer'?'采购员':'检查员'}}</td>
								<td>{{cl.account}}</td>
								<td>{{new Date(cl.createtime).toLocaleString()}}</td>
								<td>{{cl.able == 1?'使用中':'已删除'}}</td>
								<td><a style="cursor: pointer;" v-on:click="editClerk(cl)">修改该管理员</a></td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade" id="medicineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						药品信息
					</h4>
				</div>
				<div class="modal-body">
					<div>
						<div style="display: inline-block;width: 200px;height: 150px;overflow: hidden;vertical-align: top"><img :src="viewMedicineMsg.imgurl" class="img-responsive"></div>
						<div style="display: inline-block;width: 350px;vertical-align: top">
							<table class="table">
								<tbody>
									<tr>
										<td style="width: 30%">药品名称</td>
										<td> {{viewMedicineMsg.name}}</td>
									</tr>
									<tr>
										<td style="width: 30%">药品价格</td>
										<td>{{viewMedicineMsg.price}}</td>
									</tr>
									<tr>
										<td style="width: 30%">药品数量</td>
										<td>{{viewMedicineMsg.amout}}</td>
									</tr>
									<tr>
										<td style="width: 30%">生产时间</td>
										<td>{{new Date(viewMedicineMsg.producetime*1000).toLocaleDateString()}}</td>
									</tr>
									<tr>
										<td style="width: 30%">保质期长</td>
										<td>{{viewMedicineMsg.abletime/(30*24*3600)}}个月</td>
									</tr>
									<tr>
										<td style="width: 30%">有效期至</td>
										<td>{{new Date(viewMedicineMsg.producetime*1000+viewMedicineMsg.abletime*1000).toLocaleDateString()}}</td>
									</tr>
									<tr>
										<td style="width: 30%">药品介绍</td>
										<td>{{viewMedicineMsg.introduce}}</td>
									</tr>
									<tr>
										<td style="width: 30%">生产公司</td>
										<td>{{viewMedicineMsg.company}}</td>
									</tr>
									<tr>
										<td style="width: 30%">生产地址</td>
										<td>{{viewMedicineMsg.address}}</td>
									</tr>
									<tr>
										<td style="width: 30%">公司电话</td>
										<td>{{viewMedicineMsg.phone}}</td>
									</tr>
									<tr>
										<td style="width: 30%">药品编码</td>
										<td>{{viewMedicineMsg.code}}</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<div class="modal fade" id="billModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						账单详细内容
					</h4>
				</div>
				<div class="modal-body">
					<table class="table">
						<tbody>
							<tr>
								<td>操作时间</td>
								<td>{{new Date(viewBillMsg.create_time).toLocaleString()}}</td>
							</tr>
							<tr>
								<td>操作人员</td>
								<td>{{viewBillMsg.clerk_name}}</td>
							</tr>
							<tr>
								<td>操作类型</td>
								<td>{{viewBillMsg.type=='sale'?'出售':viewBillMsg.type=='damage'?'销毁':'采购'}}</td>
							</tr>
							<tr>
								<td>操作药品</td>
								<td>{{viewBillMsg.medicine_name}}</td>
							</tr>
							<tr>
								<td>操作数量</td>
								<td>{{viewBillMsg.amout}}</td>
							</tr>
							<tr>
								<td>操作信息</td>
								<td>{{viewBillMsg.message}}</td>
							</tr>
							<tr>
								<td>操作备注</td>
								<td>{{viewBillMsg.remarks}}</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<div class="modal fade" id="editMedicineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						对<span style="color: red">药品</span>修改信息
					</h4>
				</div>
				<div class="modal-body">
					<table class="table operate-table">
						<tbody>
							<tr>
								<td>名称</td>
								<td>
									<div style="width: 250px;height: 180px;overflow: hidden;display: inline-block;">
										<img class="img-responsive" :src="editImg">
									</div>
									<div style="height: 30px;line-height: 30px;"><form id="uploadForm"><input id="inputFile" type="file" name="imgfile"></form></div>
								</td>
							</tr>
							<tr>
								<td>名称</td>
								<td><input  class="form-control operate-input" v-model="editName" type="text" placeholder="输入名称"></td>
							</tr>
							<tr>
								<td>价格</td>
								<td><input  class="form-control operate-input" v-model="editPrice" type="number" placeholder="输入价格"></td>
							</tr>
							<tr>
								<td>药品介绍</td>
								<td><textarea style="height: 80px;" class="form-control operate-input" v-model="editIntroduce" type="text" placeholder="输入备注"></textarea></td>
							</tr>
						</tbody>
					</table>
					<button v-on:click="edit" type="button" class="btn btn-success" style="width: 100px;margin-left: 105px;">保存</button>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<div class="modal fade" id="editClerkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						对<span style="color: red">管理员</span>修改信息
					</h4>
				</div>
				<div class="modal-body">
					<table class="table operate-table">
						<tbody>
							<tr>
								<td>名称</td>
								<td><input  class="form-control operate-input" v-model="editClerkMsg.name" type="text" placeholder="输入新名称"></td>
							</tr>
							<tr>
								<td>部门</td>
								<td><input  class="form-control operate-input" v-model="editClerkMsg.department" type="text" placeholder="输入新部门"></td>
							</tr>
							<tr>
								<td>账号</td>
								<td><input  class="form-control operate-input" v-model="editClerkMsg.account" type="text" placeholder="输入新账号"></td>
							</tr>
							<tr>
								<td>重置密码</td>
								<td><input  class="form-control operate-input" v-model="editClerkMsg.password" type="text" placeholder="如需重置密码，请输入新的密码"></td>
							</tr>
							<tr>
								<td>将状态设置为</td>
								<td>
									<div style="vertical-align: middle;">
										<input type="radio" :value="1" v-model="editClerkMsg.able"><label style="margin-right:40px;">可用</label>
										<input type="radio" :value="0" v-model="editClerkMsg.able"><label>删除</label>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
					<button v-on:click="editClerkSave" type="button" class="btn btn-success" style="width: 100px;margin-left: 105px;">保存</button>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<div class="modal fade" id="addMedicineModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						对<span style="color: red">药品</span>修改信息
					</h4>
				</div>
				<div class="modal-body">
					<table class="table operate-table">
						<tbody>
							<tr>
								<td>名称</td>
								<td>
									<div style="width: 250px;height: 180px;overflow: hidden;display: inline-block;">
										<img class="img-responsive" :src="addMedicineMsg.imgurl">
									</div>
									<div style="height: 30px;line-height: 30px;"><form id="uploadForm2"><input id="inputFile2" type="file" name="imgfile"></form></div>
								</td>
							</tr>
							<tr>
								<td>名称</td>
								<td><input  class="form-control operate-input" v-model="addMedicineMsg.name" type="text" placeholder="输入名称"></td>
							</tr>
							<tr>
								<td>价格</td>
								<td><input  class="form-control operate-input" v-model="addMedicineMsg.price" type="number" placeholder="输入价格"></td>
							</tr>
							<tr>
								<td>药品介绍</td>
								<td><textarea style="height: 80px;" class="form-control operate-input" v-model="addMedicineMsg.introduce" type="text" placeholder="输入介绍"></textarea></td>
							</tr>
						</tbody>
					</table>
					<button v-on:click="addMedicineSave" type="button" class="btn btn-success" style="width: 100px;margin-left: 105px;">保存</button>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<div class="modal fade" id="addClerkModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						新增业务员
					</h4>
				</div>
				<div class="modal-body">
					<table class="table operate-table">
						<tbody>
							<tr>
								<td>名称</td>
								<td><input  class="form-control operate-input" v-model="addClerkMsg.name" type="text" placeholder="输入名称"></td>
							</tr>
							<tr>
								<td>类型</td>
								<td>
									<select class="form-control" v-model="addClerkMsg.type" style="position:relative;top:8px;">
										<option value="sales">销售员</option>
										<option value="buyer">采购员</option>
										<option value="check">检查员</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>账号</td>
								<td><input  class="form-control operate-input" v-model="addClerkMsg.account" type="text" placeholder="输入账号"></td>
							</tr>
							<tr>
								<td>密码</td>
								<td><input  class="form-control operate-input" v-model="addClerkMsg.password" type="password" placeholder="输入预设密码"></td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="modal-footer">
					<button type="button" v-on:click="addClerkSave" class="btn btn-success" style="width: 100px;margin-left: 105px;">确认</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

	<div class="modal fade" id="passwordModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="width: 350px;">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						修改密码
					</h4>
				</div>
				<div class="modal-body">
					<input class="form-control change-password" v-model="oldPassword" type="password" placeholder="输入旧密码">
					<input class="form-control change-password" v-model="newPassword" type="password" placeholder="输入新密码">
				</div>
				<div class="modal-footer">
					<button v-on:click="changePassword" type="button" class="btn btn-success" style="width: 100px;margin-left: 105px;">保存</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

</div>



<script type="text/javascript" src="/js/admin.js"></script>
</body>
</html>